<template>
  <div>
    <SectionTitle title="申请信息" style="margin-bottom: 10px;" />
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage ? 'left' : 'right'"
      label-width="110px"
      class="customer-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="labelSpan">
          <el-form-item label="审批单号:">
            <ToolTip :content="applyInfo.approvalNo" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="创建人:">
            <CheckUserInfo v-if="applyInfo.creator" :label="applyInfo.creator" :user-id="applyInfo.creatorId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="创建时间:">
            <ToolTip :content="applyInfo.createTime | format('YYYY/MM/DD HH:mm')" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="申请部门:">
            <ToolTip :content="applyInfo.proposerDepartment" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="申请人:">
            <CheckUserInfo v-if="applyInfo.proposer" :label="applyInfo.proposer" :user-id="applyInfo.proposerId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="申请范围:">
            <ToolTip :content="applyInfo.range" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="申请说明:">
            <ToolTip :content="applyInfo.description" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="labelSpan">
          <el-form-item label="附件:">
            <div class="ellipsis">
              <FileShowList
                v-if="applyInfo.attachment && applyInfo.attachment.length"
                :file-list="applyInfo.attachment"
                style="max-width:100%;" />
              <span v-else>--</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import FileShowList from '@/components/CreateOrder/fileShowList';
import { format } from '@/filters/date';
import { mapState } from 'vuex';
export default {
  components: {
    SectionTitle,
    FileShowList
  },
  filters: { format },
  props: {
    applyInfo: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    labelSpan() {
      return this.showMobilePage ? 24 : 8;
    }
  }
};
</script>

<style lang="scss" scoped>
.customer-form {
  margin-bottom: 24px;
  &::v-deep {
    .el-col-8 {
      &:not(:nth-child(3n)) {
        border-right: 1px solid #EBEEFD;
      }
    }
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
